{% extends "base.html" %}

{% block title %}User Dashboard{% endblock %}

{% block extrastyle %}
	<link rel="stylesheet" type="text/css" href="/static_media/js/visualize.css">
{% endblock %}

{% block extrahead %}
	<script type="text/javascript" src="/static_media/js/visualize.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('#dataTable').visualize({height:250, type:'line'});
		});
	</script>
{% endblock %}

{% block content %}
  	<div class="dashboardRight">
  		{% if user.is_active %}
  			<h2>Notifications</h2>
  			{% if notifications %}
			  	<ul class="dashboardNotifications">
				  {% for item in notifications %}
				  <li class="dashboardNotification">
				  	{{item|safe}}
				  </li>
				  {% endfor %}
				</ul>
			{% else %}
				You don't have any notifications pending.
			{% endif %}
			
			<h2>Your Activity</h2>
			{% if recentActivity %}
				<ul class="dashboardNotifications">
				{% for activity in recentActivity %}
					<li class="recentActivity">
						You <span class="recentActivity">{{activity.event}}</span>.<br />
						<span class="timestamp">{{activity.time|timesince}} ago</span>
					</li>
				{% endfor %}
				</ul>
			{% else %}
				You have no recent activity.
			{% endif %}
  		{% else %}
			<h2>Log in</h2>
			<form method="post" action="/accounts/login/" class="dashboardLogin">{% csrf_token %}
				<table>
				<tr>
				    <td><label for="id_username">Username</label></td>
				    <td><input id="id_username" type="text" name="username" maxlength="30" /></td>
				</tr>
				<tr>
				    <td><label for="id_password">Password</label></td>
				    <td><input type="password" name="password" id="id_password" /></td>
				</tr>
				</table>
				
				<input type="submit" value="log in" />
			</form>
			<p>
				Don't have an account yet?<br />
				<a href="/accounts/">Register</a> to connect with your gym.
			</p>
		{% endif %}
	</div>
	
	<div class="dashboardLeft">
		<p>
			Welcome to MyClimb@Stanford Climbing Wall!
		</p>
		<p>
		This site is designed by Stanford students and Stanford Climbing Wall staff members to give you a richer experience at our wall.  Use it to help plan your visit based on current and historical usage information, to provide feedback on our routes, and to find belay and bouldering partners.
		</p>
		<p>
		Climb on!
		</p>
		
		<h2>Recent Usage</h2>
		<table id="dataTable" class="dataTable">
			<thead>
				<tr>
					{% for heading in data.headings %}
						<th>{{heading}}</th>
					{% endfor %}
				</tr>
			</thead>
			<tbody>
				<tr>
					{% for point in data.points %}
						<td>{{point}}</td>
					{% endfor %}
				</tr>
			</tbody>
		</table>
	</div>

{% endblock %}